<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible">
      <el-form v-model="selectedRole" style="text-align: left" ref="dataForm">
        <el-form-item label="角色名" label-width="120px" prop="username">
          <el-input v-model="selectedRole.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="120px" prop="name">
          <el-input v-model="selectedRole.nameZh" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单配置" label-width="120px" prop="menus">
          <el-tree
            :data="menus"
            :props="props"
            show-checkbox
            :default-checked-keys="selectedMenusIds"
            node-key="id"
            :check-strictly="checkStrictly"
            ref="tree">
            <!--            :default-checked-keys="selectedMenusIds"-->
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit(selectedRole)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserEdit",
  data() {
    return {
      title: '',
      dialogFormVisible: false,
      selectedRole: [],
      selectedMenusIds: [],
      menus: [],
      props: {
        id: 'id',
        label: 'nameZh',
        children: 'children'
      },
      checkStrictly: false
    }
  },
  methods: {
    editRole(role, menus) {
      this.menus = menus
      this.dialogFormVisible = true
      this.selectedRole = role
      var menuIds = []
      let permsMenuList = role.menus
      let menulist = this.toTree(permsMenuList, 0) // 转树
      permsMenuList.forEach(permsMenu => {
        menuIds.push(permsMenu.id) // 进数组
      })

      /*
      * 问题：
      *   1.回显时子节点未全部选择，父节点如何半选
      *   2.回显解除父子关联后，无法选择父节点带动全部子节点
      * */
      this.selectedMenusIds = menuIds
      this.checkStrictly = true // 解除父子关联
      // 判断树是否已经加载，第一次打开对话框前树不存在，会报错。所以需要设置 default-checked
      if (this.$refs.tree) {
        this.$refs.tree.setCheckedKeys(menuIds)
      }
    },
    onSubmit(role) {
      var zi = this.$refs.tree.getCheckedKeys()
      var fu = this.$refs.tree.getHalfCheckedKeys()
      var fu_zi = zi.concat(fu)
      this.$axios.put('/role/roleandperms/update', {
        id: role.id,
        name: role.name,
        nameZh: role.nameZh,
        perms: fu_zi
      }).then(resp => {
        if (resp && resp.data.code === 200) {
          this.$message({
            message: resp.data.result,
            type: "success",
            duration: 3000
          })
          this.$emit('reload')
          this.dialogFormVisible = false
        }
      })
    },
    toTree(list, parId) {
      list.forEach(element => {
        let parentId = element.parentId;
        if (parentId !== parId) { // 当前节点不为父节点时
          list.forEach(ele => {
            if (ele.id == parentId) { //当内层循环的ID== 外层循环的parendId时，（说明有children），需要往该内层id里建个children并push对应的数组；
              if (!ele.children) {
                ele.children = [];
              }
              ele.children.push(element);
            }
          });
        }
      });
      list = list.filter(ele => ele.parentId === 0);
      return list;
    }
  }
}
</script>

<style scoped>

</style>
